<template>
    <!-- header -->
    
  <div class="nav-container page-component">
        <!--左侧导航 #start -->
        
    <div class="nav left-nav">
            
      <div class="nav-item selected">
                <span
          class="v-link selected dark"
          :onclick="
            'javascript:window.location=\'/hospital/' + schedule.hoscode + '\''
          "
          >预约挂号 </span
        >
              
      </div>
            
      <div class="nav-item">
                <span
          class="v-link clickable dark"
          :onclick="
            'javascript:window.location=\'/hospital/detail/' +
            schedule.hoscode +
            '\''
          "
          > 医院详情 </span
        >
              
      </div>
            
      <div class="nav-item">
                <span
          class="v-link clickable dark"
          :onclick="
            'javascript:window.location=\'/hospital/notice/' +
            schedule.hoscode +
            '\''
          "
          > 预约须知 </span
        >
              
      </div>
            
      <div class="nav-item">
        <span class="v-link clickable dark"> 停诊信息 </span>       
      </div>
            
      <div class="nav-item">
        <span class="v-link clickable dark"> 查询/取消 </span>       
      </div>
          
    </div>
        <!-- 左侧导航 #end -->

        <!-- 右侧内容 #start -->
        
    <div class="page-container">
            
      <div class="hospital-order">
                
        <div class="header-wrapper">
                    
          <div class="title mt20"> 确认挂号信息</div>
                    
          <div>
                        
            <div class="sub-title">
                            
              <div class="block"></div>
                            选择就诊人：             
            </div>
                        
            <div class="patient-wrapper">
                            
              <div>
                                
                <div class="v-card clickable item">
                                    
                  <div
                    class="inline"
                    v-for="(item, index) in patientList"
                    :key="item.id"
                    @click="selectPatient(index)"
                    style="margin-right: 10px"
                  >
                                        <!-- 选中 selected  未选中去掉selected-->
                                        
                    <div
                      :class="
                        activeIndex == index
                          ? 'item-wrapper selected'
                          : 'item-wrapper'
                      "
                    >
                                            
                      <div>
                                                
                        <div class="item-title">{{ item.name }}</div>
                                                
                        <div>{{ item.param.certificatesTypeString }}</div>
                                                
                        <div>{{ item.certificatesNo }}</div>
                                              
                      </div>
                                            <img
                        src="//img.114yygh.com/static/web/checked.png"
                        class="checked"
                      />
                                          
                    </div>
                                      
                  </div>
                                  
                </div>
                              
              </div>
                            
              <div class="item space add-patient v-card clickable">
                                
                <div class="">
                                    
                  <div class="item-add-wrapper" @click="addPatient()">
                     +                     添加就诊人                   
                  </div>
                                  
                </div>
                              
              </div>
                            
              <div class="el-loading-mask" style="display: none">
                                
                <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        
                    <circle
                      cx="50"
                      cy="50"
                      r="20"
                      fill="none"
                      class="path"
                    ></circle>
                                      
                  </svg>
                                  
                </div>
                              
              </div>
                          
            </div>
                        <!-- 就诊人，选中显示 -->
                        
            <div class="sub-title" v-if="patientList.length > 0">
                            
              <div class="block"></div>
                            选择就诊卡： <span class="card-tips"
                ><span class="iconfont"></span
                > 如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销</span
              >
                          
            </div>

                        <el-card
              class="patient-card"
              shadow="always"
              v-if="patientList.length > 0"
            >
                            
              <div slot="header" class="clearfix">
                                
                <div>
                  <span class="name"
                    > {{ patient.name }} {{
                      patient.certificatesNo
                    }} 居民身份证</span
                  >
                </div>
                              
              </div>
                            
              <div class="card SELF_PAY_CARD">
                                
                <div class="info">
                  <span class="type">{{
                    patient.isInsure == 0 ? "自费" : "医保"
                  }}</span
                  ><span class="card-no">{{ patient.certificatesNo }}</span
                  ><span class="card-view">居民身份证</span>
                </div>
                                <span class="operate"></span>
              </div>
                            
              <div class="card">
                                
                <div class="text bind-card"></div>
                              
              </div>
                          </el-card
            >

                        
            <div class="sub-title">
                            
              <div class="block"></div>
                            挂号信息             
            </div>
                        
            <div class="content-wrapper">
                            <el-form ref="form">
                                <el-form-item label="就诊日期：">
                                    
                  <div class="content">
                    <span
                      >{{ schedule.workDate }} {{ schedule.param.dayOfWeek }} {{
                        schedule.workTime == 0 ? "上午" : "下午"
                      }}</span
                    >
                  </div>
                                  </el-form-item
                >
                                <el-form-item label="就诊医院：">
                                    
                  <div class="content">
                    <span>{{ schedule.param.hosname }} </span>
                  </div>
                                  </el-form-item
                >
                                <el-form-item label="就诊科室：">
                                    
                  <div class="content">
                    <span>{{ schedule.param.depname }} </span>
                  </div>
                                  </el-form-item
                >
                                <el-form-item label="医生姓名：">
                                    
                  <div class="content">
                    <span>{{ schedule.docname }} </span>
                  </div>
                                  </el-form-item
                >
                                <el-form-item label="医生职称：">
                                    
                  <div class="content">
                    <span>{{ schedule.title }} </span>
                  </div>
                                  </el-form-item
                >
                                <el-form-item label="医生专长：">
                                    
                  <div class="content">
                    <span>{{ schedule.skill }}</span>
                  </div>
                                  </el-form-item
                >
                                <el-form-item label="医事服务费：">
                                    
                  <div class="content">
                                        
                    <div class="fee">{{ schedule.amount }}元</div>
                                      
                  </div>
                                  </el-form-item
                >
                              </el-form
              >
                          
            </div>

                        <!-- 用户信息 #start-->
                        
            <div>
                            
              <div class="sub-title">
                                
                <div class="block"></div>
                                用户信息               
              </div>
                            
              <div class="content-wrapper">
                                <el-form ref="form" :model="form">
                                    <el-form-item
                    class="form-item"
                    label="就诊人手机号："
                  >
                                        {{
                      patient.phone
                    }}
                                      </el-form-item
                  >
                                  </el-form
                >
                              
              </div>
                          
            </div>
                        <!-- 用户信息 #end -->
                        
            <div class="bottom-wrapper">
                            
              <div class="button-wrapper">
                                
                <div class="v-button" @click="submitOrder()">
                  {{ submitBnt }}
                </div>
                              
              </div>
                          
            </div>
                      
          </div>
                  
        </div>
              
      </div>
          
    </div>
        <!-- 右侧内容 #end -->
      
  </div>
    <!-- footer -->
</template>

<script>
import "~/assets/css/hospital_personal.css";
import "~/assets/css/hospital.css";

import hospitalApi from "@/api/hosp";
import patientApi from "@/api/patient";
import orderApi from "@/api/orderInfo";
export default {
  data() {
    return {
      scheduleId: null,
      schedule: {
        param: {},
      },
      patientList: [],
      patient: {},

      activeIndex: 0,
      submitBnt: "确认挂号",
    };
  },

  created() {
    this.scheduleId = this.$route.query.scheduleId;

    this.init();
  },

  methods: {
    init() {
      this.getSchedule();

      this.findPatientList();
    },

    getSchedule() {
      hospitalApi.getSchedule(this.scheduleId).then((response) => {
        this.schedule = response.data;
      });
    },

    findPatientList() {
      patientApi.findList().then((response) => {
        this.patientList = response.data;
        if (this.patientList.length > 0) {
          this.patient = this.patientList[0];
        }
      });
    },

    selectPatient(index) {
      this.activeIndex = index;
      this.patient = this.patientList[index];
    },

    submitOrder() {
      if (this.submitBnt='正在提交') {
        this.$messge.error('不能重复提交')
        return
        
      }
      this.submitBnt='正在提交'
      orderApi.saveOrders(this.scheduleId,this.patient.id)
        .then(response=>{
          let orderId=response.data //订单id
          window.location.href='/order/show?orderId='+orderId
        }).catch(e=>{
          this.submitBnt='确认挂号'
        })
    },

    addPatient() {
      window.location.href = "/patient/add";
    },
  },
};
</script>